<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能出题系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            min-height: 100vh;
            padding: 20px;
            margin: 0;
            overflow-x: hidden;
            position: relative;
            background: #0a0a0a;
            color: #e0e0e0;
        }

        #bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            opacity: 0.3;
            filter: brightness(0.4) contrast(1.2);
        }

        /* 视频加载失败时的备用背景 */
        #bg-video + .video-overlay {
            background: linear-gradient(135deg, rgba(15, 15, 30, 0.9) 0%, rgba(30, 15, 45, 0.9) 100%);
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0f0f1e 0%, #1e0f2d 100%);
            z-index: -3;
        }

        .video-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(15, 15, 30, 0.8) 0%, rgba(30, 15, 45, 0.8) 100%);
            z-index: -1;
            backdrop-filter: blur(2px);
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background: rgba(20, 20, 35, 0.95);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(100, 100, 150, 0.2);
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 3px solid #6366f1;
        }

        .header h1 {
            color: #f8fafc;
            font-size: 32px;
            margin-bottom: 10px;
            font-weight: 700;
            text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
        }

        .header p {
            color: #94a3b8;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .header-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }

        .import-panel {
            background: rgba(30, 30, 50, 0.8);
            border: 2px solid rgba(100, 100, 150, 0.3);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            animation: slideDown 0.3s ease;
            display: none;
        }

        .import-panel h3 {
            color: #f8fafc;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .import-panel textarea {
            width: 100%;
            height: 200px;
            border: 2px solid rgba(100, 100, 150, 0.3);
            border-radius: 10px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            resize: vertical;
            background: rgba(15, 15, 25, 0.8);
            color: #e0e0e0;
        }

        .import-panel textarea:focus {
            border-color: #6366f1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .import-buttons {
            margin: 15px 0;
            text-align: center;
        }

        .json-example {
            margin-top: 20px;
        }

        .json-example summary {
            cursor: pointer;
            color: #6366f1;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .json-example pre {
            background: rgba(15, 15, 25, 0.9);
            color: #94a3b8;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-size: 12px;
            line-height: 1.4;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid rgba(100, 100, 150, 0.2);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(20, 20, 35, 0.95);
            border-radius: 20px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            border: 1px solid rgba(100, 100, 150, 0.3);
        }

        /* 出题设置界面 */
        .setup-screen {
            display: block;
        }

        .industry-selection {
            margin-bottom: 30px;
        }

        .industry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .industry-card {
            background: linear-gradient(135deg, rgba(30, 30, 50, 0.8), rgba(40, 40, 60, 0.8));
            border: 2px solid rgba(100, 100, 150, 0.3);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .industry-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
            transition: left 0.5s;
        }

        .industry-card:hover::before {
            left: 100%;
        }

        .industry-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(99, 102, 241, 0.3);
            border-color: #6366f1;
        }

        .industry-card.selected {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            border-color: #6366f1;
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
        }

        .industry-icon {
            font-size: 48px;
            margin-bottom: 10px;
            display: block;
            filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
        }

        .industry-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #f8fafc;
        }

        .industry-desc {
            font-size: 12px;
            opacity: 0.8;
            color: #94a3b8;
        }

        .industry-card.selected .industry-desc {
            color: rgba(255, 255, 255, 0.9);
        }

        .custom-prompt {
            margin-bottom: 30px;
        }

        .prompt-section {
            background: rgba(30, 30, 50, 0.8);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(100, 100, 150, 0.2);
        }

        .prompt-section h3 {
            color: #f8fafc;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .prompt-textarea {
            width: 100%;
            height: 120px;
            border: 2px solid rgba(100, 100, 150, 0.3);
            border-radius: 10px;
            padding: 15px;
            font-size: 14px;
            resize: vertical;
            background: rgba(15, 15, 25, 0.8);
            color: #e0e0e0;
            font-family: inherit;
        }

        .prompt-textarea:focus {
            border-color: #6366f1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .prompt-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .preset-btn {
            background: rgba(99, 102, 241, 0.2);
            color: #6366f1;
            border: 1px solid #6366f1;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .preset-btn:hover {
            background: #6366f1;
            color: white;
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
        }

        .generation-settings {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .setting-group {
            background: rgba(30, 30, 50, 0.8);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(100, 100, 150, 0.2);
        }

        .setting-group label {
            display: block;
            color: #f8fafc;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .setting-group select,
        .setting-group input {
            width: 100%;
            padding: 10px;
            border: 2px solid rgba(100, 100, 150, 0.3);
            border-radius: 8px;
            font-size: 14px;
            background: rgba(15, 15, 25, 0.8);
            color: #e0e0e0;
        }

        .setting-group select:focus,
        .setting-group input:focus {
            border-color: #6366f1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .generate-btn {
            background: linear-gradient(45deg, #6366f1, #8b5cf6);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;
            margin: 0 auto;
            position: relative;
            min-width: 200px;
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
        }

        .generate-btn:disabled {
            background: rgba(100, 100, 120, 0.5);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .loading-spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 答题界面样式 */
        .quiz-screen {
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(50, 50, 70, 0.5);
            border-radius: 4px;
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(100, 100, 150, 0.2);
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 4px;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
        }

        .question-card {
            background: rgba(25, 25, 40, 0.9);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .question-card.current {
            border-color: #6366f1;
            background: rgba(30, 30, 50, 0.9);
            box-shadow: 0 15px 35px rgba(99, 102, 241, 0.2);
        }

        .question-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .question-number {
            background: linear-gradient(45deg, #6366f1, #8b5cf6);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            font-size: 16px;
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
        }

        .question-category {
            background: rgba(99, 102, 241, 0.2);
            color: #6366f1;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .question-text {
            font-size: 18px;
            color: #f8fafc;
            line-height: 1.6;
            margin-bottom: 25px;
            font-weight: 500;
        }

        .options {
            display: grid;
            gap: 12px;
        }

        .option {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            background: rgba(35, 35, 55, 0.8);
            border: 2px solid rgba(100, 100, 150, 0.3);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .option::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
            transition: left 0.5s;
        }

        .option:hover::before {
            left: 100%;
        }

        .option:hover {
            background: rgba(40, 40, 65, 0.9);
            border-color: #6366f1;
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
        }

        .option.selected {
            background: rgba(34, 197, 94, 0.2);
            border-color: #22c55e;
            color: #22c55e;
        }

        .option.correct {
            background: rgba(34, 197, 94, 0.3);
            border-color: #22c55e;
            color: #22c55e;
            box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
        }

        .option.incorrect {
            background: rgba(239, 68, 68, 0.2);
            border-color: #ef4444;
            color: #ef4444;
            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
        }

        .option-label {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(100, 100, 150, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: bold;
            font-size: 14px;
            flex-shrink: 0;
        }

        .option.selected .option-label {
            background: #22c55e;
        }

        .option.correct .option-label {
            background: #22c55e;
        }

        .option.incorrect .option-label {
            background: #ef4444;
        }

        .option-text {
            flex: 1;
            font-size: 16px;
            line-height: 1.4;
            color: #e0e0e0;
        }

        .explanation {
            margin-top: 20px;
            padding: 20px;
            background: rgba(30, 30, 50, 0.8);
            border-left: 4px solid #6366f1;
            border-radius: 8px;
            display: none;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .explanation.show {
            display: block;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .explanation-title {
            color: #6366f1;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .explanation-text {
            color: #94a3b8;
            line-height: 1.6;
            font-size: 14px;
        }

        .controls {
            text-align: center;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 2px solid rgba(100, 100, 150, 0.3);
        }

        .btn {
            background: linear-gradient(45deg, #6366f1, #8b5cf6);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0 10px;
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
        }

        .btn:disabled {
            background: rgba(100, 100, 120, 0.5);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-secondary {
            background: linear-gradient(45deg, rgba(100, 100, 150, 0.8), rgba(120, 120, 170, 0.8));
            box-shadow: 0 5px 15px rgba(100, 100, 150, 0.2);
        }

        .btn-secondary:hover {
            box-shadow: 0 10px 25px rgba(100, 100, 150, 0.3);
        }

        .question-navigation {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
            padding: 20px;
            background: rgba(30, 30, 50, 0.8);
            border-radius: 15px;
            border: 1px solid rgba(100, 100, 150, 0.2);
        }

        .nav-item {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            font-size: 14px;
            border: 2px solid rgba(100, 100, 150, 0.3);
            background: rgba(40, 40, 60, 0.8);
            color: #94a3b8;
        }

        .nav-item:hover {
            transform: scale(1.1);
            border-color: #6366f1;
            color: #6366f1;
        }

        .nav-item.answered {
            background: #22c55e;
            color: white;
            border-color: #22c55e;
            box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
        }

        .nav-item.current {
            background: #6366f1;
            color: white;
            border-color: #6366f1;
            transform: scale(1.2);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
        }

        .results {
            display: none;
            text-align: center;
            padding: 40px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
            color: white;
            border-radius: 20px;
            margin-top: 30px;
            border: 1px solid rgba(99, 102, 241, 0.5);
            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
        }

        .results.show {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .score {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
        }

        .score-text {
            font-size: 20px;
            margin-bottom: 20px;
        }

        .score-details {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

        .score-item {
            text-align: center;
        }

        .score-item-number {
            font-size: 24px;
            font-weight: bold;
            display: block;
        }

        .score-item-label {
            font-size: 14px;
            opacity: 0.8;
            margin-top: 5px;
        }

        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 24px;
            }
            
            .header-buttons {
                flex-direction: column;
                gap: 5px;
            }
            
            .header-buttons .btn {
                padding: 8px 16px;
                font-size: 12px;
            }
            
            .industry-grid {
                grid-template-columns: 1fr;
            }
            
            .generation-settings {
                grid-template-columns: 1fr;
            }
            
            .question-text {
                font-size: 16px;
            }
            
            .import-panel {
                padding: 15px;
            }
            
            .import-panel textarea {
                height: 150px;
                font-size: 12px;
            }
            
            .modal-content {
                padding: 20px;
                width: 95%;
            }
            
            /* 移动端视频背景优化 */
            #bg-video {
                opacity: 0.2;
            }
            
            .video-overlay {
                background: linear-gradient(135deg, rgba(15, 15, 30, 0.9) 0%, rgba(30, 15, 45, 0.9) 100%);
            }
        }
    </style>
</head>
<body>
    <!-- 视频背景 -->
    <video id="bg-video" autoplay muted loop playsinline>
        <source src="https://assets.mixkit.co/videos/preview/mixkit-digital-data-and-analytics-visualization-34542-large.mp4" type="video/mp4">
        <source src="https://assets.mixkit.co/videos/preview/mixkit-abstract-blue-background-with-defocused-lights-33316-large.mp4" type="video/mp4">
        <source src="https://assets.mixkit.co/videos/preview/mixkit-network-mesh-sphere-animation-29055-large.mp4" type="video/mp4">
        <!-- 如果视频加载失败，会显示备用渐变背景 -->
    </video>
    <div class="video-overlay"></div>

    <div class="container">
        <div class="header">
            <h1>🤖 AI智能出题系统</h1>
            <p>选择行业领域，AI为您量身定制专业测试题目</p>
            <div class="header-buttons">
                <button class="btn btn-secondary" onclick="toggleImport()">📁 导入题库</button>
                <button class="btn btn-secondary" onclick="exportQuestions()" id="exportBtn" style="display: none;">📤 导出题库</button>
                <button class="btn btn-secondary" onclick="showJsonExample()">📖 格式示例</button>
            </div>
        </div>

        <!-- 导入题库面板 -->
        <div class="import-panel" id="importPanel">
            <h3>📋 导入JSON题库数据</h3>
            <textarea id="jsonInput" placeholder="请粘贴JSON格式的题库数据..."></textarea>
            <div class="import-buttons">
                <button class="btn" onclick="importQuestions()">导入题库</button>
                <button class="btn btn-secondary" onclick="toggleImport()">取消</button>
            </div>
            <div class="json-example">
                <details>
                    <summary>📖 点击查看JSON格式要求</summary>
                    <pre>题库必须是JSON数组格式，每道题包含以下字段：
- category: 题目分类
- question: 题目内容  
- options: 4个选项的数组
- correct: 正确答案索引(0-3)
- explanation: 详细解析</pre>
                </details>
            </div>
        </div>

        <!-- 出题设置界面 -->
        <div class="setup-screen" id="setupScreen">
            <div class="industry-selection">
                <h3 style="color: #f8fafc; margin-bottom: 20px; font-size: 20px;">📚 选择测试领域</h3>
                <div class="industry-grid">
                    <div class="industry-card" data-industry="luggage" onclick="selectIndustry('luggage')">
                        <span class="industry-icon">🧳</span>
                        <div class="industry-title">市场交易</div>
                        <div class="industry-desc">产品知识、市场分析、交易实务</div>
                    </div>
                    <div class="industry-card" data-industry="finance" onclick="selectIndustry('finance')">
                        <span class="industry-icon">💰</span>
                        <div class="industry-title">金融投资</div>
                        <div class="industry-desc">投资理论、风险管理、市场分析</div>
                    </div>
                    <div class="industry-card" data-industry="tech" onclick="selectIndustry('tech')">
                        <span class="industry-icon">💻</span>
                        <div class="industry-title">软件开发</div>
                        <div class="industry-desc">编程技术、架构设计、项目管理</div>
                    </div>
                    <div class="industry-card" data-industry="marketing" onclick="selectIndustry('marketing')">
                        <span class="industry-icon">📈</span>
                        <div class="industry-title">市场营销</div>
                        <div class="industry-desc">品牌策略、数字营销、消费心理</div>
                    </div>
                    <div class="industry-card" data-industry="hr" onclick="selectIndustry('hr')">
                        <span class="industry-icon">👥</span>
                        <div class="industry-title">人力资源</div>
                        <div class="industry-desc">招聘选拔、绩效管理、组织发展</div>
                    </div>
                    <div class="industry-card" data-industry="custom" onclick="selectIndustry('custom')">
                        <span class="industry-icon">🎯</span>
                        <div class="industry-title">自定义领域</div>
                        <div class="industry-desc">输入自定义提示词生成题目</div>
                    </div>
                </div>
            </div>

            <div class="custom-prompt">
                <div class="prompt-section">
                    <h3>✏️ 出题提示词 <span style="font-size: 12px; color: #94a3b8;">(可修改)</span></h3>
                    <textarea id="promptText" class="prompt-textarea" placeholder="AI将根据这个提示词为您生成题目..."></textarea>
                    <div class="prompt-presets">
                        <button class="preset-btn" onclick="applyPreset('basic')">基础知识</button>
                        <button class="preset-btn" onclick="applyPreset('advanced')">高级应用</button>
                        <button class="preset-btn" onclick="applyPreset('practical')">实战案例</button>
                        <button class="preset-btn" onclick="applyPreset('comprehensive')">综合能力</button>
                    </div>
                </div>
            </div>

            <div class="generation-settings">
                <div class="setting-group">
                    <label>📊 题目数量</label>
                    <select id="questionCount">
                        <option value="5">5题 (快速测试)</option>
                        <option value="10" selected>10题 (标准测试)</option>
                        <option value="15">15题 (深度测试)</option>
                        <option value="20">20题 (全面测试)</option>
                    </select>
                </div>
                <div class="setting-group">
                    <label>🎯 难度等级</label>
                    <select id="difficultyLevel">
                        <option value="入门">入门级</option>
                        <option value="初级">初级</option>
                        <option value="中级" selected>中级</option>
                        <option value="高级">高级</option>
                        <option value="专家">专家级</option>
                    </select>
                </div>
            </div>

            <button class="generate-btn" id="generateBtn" onclick="generateQuestions()">
                <span class="loading-spinner" id="loadingSpinner"></span>
                <span id="generateBtnText">🚀 开始AI出题</span>
            </button>
        </div>

        <!-- 答题界面 -->
        <div class="quiz-screen" id="quizScreen">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>

            <div class="question-navigation" id="questionNav"></div>

            <div class="questions-container" id="questionsContainer"></div>

            <div class="controls">
                <button class="btn btn-secondary" id="prevBtn" onclick="previousQuestion()">上一题</button>
                <button class="btn" id="nextBtn" onclick="nextQuestion()">下一题</button>
                <button class="btn" id="submitBtn" onclick="submitQuiz()" style="display: none;">提交答案</button>
                <button class="btn btn-secondary" onclick="backToSetup()">重新出题</button>
            </div>
        </div>

        <div class="results" id="results">
            <div class="score" id="finalScore">0%</div>
            <div class="score-text" id="scoreText">恭喜完成测试！</div>
            <div class="score-details">
                <div class="score-item">
                    <span class="score-item-number" id="correctCount">0</span>
                    <div class="score-item-label">正确题数</div>
                </div>
                <div class="score-item">
                    <span class="score-item-number" id="incorrectCount">0</span>
                    <div class="score-item-label">错误题数</div>
                </div>
                <div class="score-item">
                    <span class="score-item-number" id="totalQuestions">0</span>
                    <div class="score-item-label">总题数</div>
                </div>
            </div>
            <button class="btn" onclick="backToSetup()" style="margin-top: 20px;">重新出题</button>
        </div>

        <!-- JSON格式示例模态框 -->
        <div class="modal" id="jsonModal">
            <div class="modal-content">
                <h3 style="color: #f8fafc; margin-bottom: 20px;">📖 JSON题库格式示例</h3>
                <pre id="jsonExample" style="background: rgba(15, 15, 25, 0.9); color: #94a3b8; padding: 20px; border-radius: 10px; font-size: 12px; line-height: 1.4; overflow-x: auto; border: 1px solid rgba(100, 100, 150, 0.2);"></pre>
                <div style="text-align: center; margin-top: 20px;">
                    <button class="btn" onclick="closeJsonModal()">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let selectedIndustry = '';
        let questions = [];
        let currentQuestion = 0;
        let userAnswers = [];
        let showingResults = false;

        // 行业预设提示词
        const industryPrompts = {
            luggage: `请为交易员岗位生成{count}道{difficulty}测试题目。涵盖以下方面：
1. 产品知识：材质特性、工艺技术、功能设计
2. 市场分析：行业趋势、竞争格局、消费行为  
3. 交易实务：价格条款、质量标准、交付流程
4. 客户管理：沟通技巧、需求分析、关系维护
5. 供应链管理：采购策略、库存控制、风险管理

题目要求：选择题形式，4个选项，包含详细解析，贴近实际工作场景。`,

            finance: `请为金融投资领域生成{count}道{difficulty}测试题目。涵盖以下方面：
1. 投资理论：资产配置、风险收益、估值模型
2. 市场分析：技术分析、基本面分析、宏观经济
3. 风险管理：风险识别、对冲策略、压力测试
4. 金融工具：股票、债券、衍生品、基金
5. 法规合规：监管要求、信息披露、投资者保护

题目要求：选择题形式，4个选项，包含详细解析，结合实际案例。`,

            tech: `请为 Java 全栈开发工程师岗位 生成 {count} 道 {difficulty} 测试题目，题目需涵盖以下方面：

后端开发：Java 核心、JVM 调优、Spring Boot、Spring Cloud 微服务、分布式事务、高并发集群设计。

前端开发：Vue、React、Reactivity（响应式编程）、Three.js 可视化与 3D 场景开发。

系统架构：微服务架构、API 网关、消息队列、缓存优化（Redis）、数据库分库分表与性能调优。

开发流程：DevOps、敏捷开发、CI/CD、代码管理、测试驱动开发（TDD）。

技术趋势：云原生（K8s、Docker）、Serverless、AI 在开发中的应用、新兴前端/后端技术趋势。

题目要求：

采用 选择题 形式，每题 4 个选项（A/B/C/D）。

每道题必须附带 详细解析，重点突出实践经验与应用场景。

题目需覆盖 实际开发问题（如高并发调优、微服务限流、前后端协作、3D可视化优化）。`,

            marketing: `请为市场营销岗位生成{count}道{difficulty}测试题目。涵盖以下方面：
1. 营销策略：品牌定位、目标市场、竞争策略
2. 数字营销：社交媒体、内容营销、搜索引擎优化
3. 消费者行为：购买决策、心理分析、用户画像
4. 营销工具：4P理论、营销漏斗、转化优化
5. 数据分析：营销指标、ROI分析、用户留存

题目要求：选择题形式，4个选项，包含详细解析，结合实际案例。`,

            hr: `请为人力资源岗位生成{count}道{difficulty}测试题目。涵盖以下方面：
1. 招聘选拔：岗位分析、面试技巧、人才评估
2. 绩效管理：目标设定、考核体系、反馈沟通
3. 薪酬福利：薪酬设计、激励机制、福利管理
4. 培训发展：培训需求、学习设计、职业规划
5. 劳动关系：法律法规、员工关系、劳动合同

题目要求：选择题形式，4个选项，包含详细解析，贴近HR实务。`
        };

        function selectIndustry(industry) {
            selectedIndustry = industry;
            
            // 更新选中状态
            document.querySelectorAll('.industry-card').forEach(card => {
                card.classList.remove('selected');
            });
            document.querySelector(`[data-industry="${industry}"]`).classList.add('selected');
            
            // 更新提示词
            if (industry === 'custom') {
                document.getElementById('promptText').value = '';
                document.getElementById('promptText').placeholder = '请输入您的自定义出题要求...';
            } else {
                const prompt = industryPrompts[industry] || '';
                document.getElementById('promptText').value = prompt;
            }
        }

        function applyPreset(type) {
            const currentPrompt = document.getElementById('promptText').value;
            let addition = '';
            
            switch(type) {
                case 'basic':
                    addition = '\n\n重点考查基础理论知识和概念理解。';
                    break;
                case 'advanced':
                    addition = '\n\n重点考查深度分析能力和高级应用技能。';
                    break;
                case 'practical':
                    addition = '\n\n重点结合实际工作场景，考查解决问题的能力。';
                    break;
                case 'comprehensive':
                    addition = '\n\n综合考查理论知识、实践能力和创新思维。';
                    break;
            }
            
            if (!currentPrompt.includes(addition)) {
                document.getElementById('promptText').value = currentPrompt + addition;
            }
        }

        async function generateQuestions() {
            const promptText = document.getElementById('promptText').value.trim();
            const questionCount = document.getElementById('questionCount').value;
            const difficulty = document.getElementById('difficultyLevel').value;
            
            if (!promptText) {
                alert('请选择行业或输入自定义提示词！');
                return;
            }
            
            // 显示加载状态
            const generateBtn = document.getElementById('generateBtn');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const btnText = document.getElementById('generateBtnText');
            
            generateBtn.disabled = true;
            loadingSpinner.style.display = 'inline-block';
            btnText.textContent = 'AI正在生成题目...';
            
            try {
                const finalPrompt = promptText
                    .replace('{count}', questionCount)
                    .replace('{difficulty}', difficulty);
                
                const systemPrompt = `你是一个专业的题目生成AI。请严格按照要求生成测试题目，返回标准JSON格式：
[
  {
    "category": "分类名称",
    "question": "题目内容",
    "options": ["选项A", "选项B", "选项C", "选项D"],
    "correct": 0,
    "explanation": "详细解析"
  }
]

要求：
1. 必须生成指定数量的题目
2. correct字段为正确答案的索引(0-3)
3. 每道题必须有4个选项
4. 解析要详细专业
5. 直接返回JSON，不要其他文字`;

                await callAIStream(systemPrompt, finalPrompt + `\n\n请生成${questionCount}道${difficulty}难度的选择题。`);
                
            } catch (error) {
                console.error('AI出题失败:', error);
                alert('AI出题失败，请稍后重试！');
                
                // 恢复按钮状态
                generateBtn.disabled = false;
                loadingSpinner.style.display = 'none';
                btnText.textContent = '🚀 开始AI出题';
            }
        }

        async function callAIStream(systemPrompt, userPrompt) {
            const response = await fetch('https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer sk-da98d539a75142458d90d8c2b8355c40'
                },
                body: JSON.stringify({
                    model: 'qwen-turbo',
                    messages: [
                        { role: 'system', content: systemPrompt },
                        { role: 'user', content: userPrompt }
                    ],
                    stream: false,
                    temperature: 0.7,
                    max_tokens: 4000
                })
            });

            if (!response.ok) {
                throw new Error(`AI请求失败: ${response.status}`);
            }

            const result = await response.json();
            const content = result.choices[0].message.content;
            
            try {
                // 尝试解析JSON
                let jsonMatch = content.match(/\[[\s\S]*\]/);
                if (jsonMatch) {
                    questions = JSON.parse(jsonMatch[0]);
                } else {
                    // 如果没有找到JSON，尝试整个内容
                    questions = JSON.parse(content);
                }
                
                // 验证题目格式
                if (!Array.isArray(questions) || questions.length === 0) {
                    throw new Error('生成的题目格式不正确');
                }
                
                // 验证每道题的格式
                questions.forEach((q, index) => {
                    if (!q.question || !Array.isArray(q.options) || q.options.length !== 4 || 
                        typeof q.correct !== 'number' || !q.explanation) {
                        throw new Error(`第${index + 1}题格式不正确`);
                    }
                });
                
                // 初始化答题
                userAnswers = new Array(questions.length).fill(null);
                currentQuestion = 0;
                showingResults = false;
                
                // 切换到答题界面
                document.getElementById('setupScreen').style.display = 'none';
                document.getElementById('quizScreen').style.display = 'block';
                document.getElementById('exportBtn').style.display = 'inline-block';
                
                // 初始化答题界面
                initQuiz();
                
            } catch (parseError) {
                console.error('解析AI返回的题目失败:', parseError);
                console.log('AI返回内容:', content);
                alert('AI生成的题目格式有误，请重新生成！');
                
                // 恢复按钮状态
                const generateBtn = document.getElementById('generateBtn');
                const loadingSpinner = document.getElementById('loadingSpinner');
                const btnText = document.getElementById('generateBtnText');
                
                generateBtn.disabled = false;
                loadingSpinner.style.display = 'none';
                btnText.textContent = '🚀 开始AI出题';
            }
        }

        function initQuiz() {
            renderQuestionNavigation();
            renderQuestion();
            updateProgress();
            updateButtons();
            
            // 显示导出按钮
            if (questions.length > 0) {
                document.getElementById('exportBtn').style.display = 'inline-block';
            }
            
            // 恢复生成按钮状态
            const generateBtn = document.getElementById('generateBtn');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const btnText = document.getElementById('generateBtnText');
            
            generateBtn.disabled = false;
            loadingSpinner.style.display = 'none';
            btnText.textContent = '🚀 开始AI出题';
        }

        function renderQuestionNavigation() {
            const nav = document.getElementById('questionNav');
            nav.innerHTML = '';
            
            questions.forEach((_, index) => {
                const navItem = document.createElement('div');
                navItem.className = 'nav-item';
                navItem.textContent = index + 1;
                navItem.onclick = () => goToQuestion(index);
                
                if (index === currentQuestion) {
                    navItem.classList.add('current');
                } else if (userAnswers[index] !== null) {
                    navItem.classList.add('answered');
                }
                
                nav.appendChild(navItem);
            });
        }

        function renderQuestion() {
            const container = document.getElementById('questionsContainer');
            container.innerHTML = '';

            const question = questions[currentQuestion];
            const questionCard = document.createElement('div');
            questionCard.className = 'question-card current';

            questionCard.innerHTML = `
                <div class="question-header">
                    <div class="question-number">${currentQuestion + 1}</div>
                    <div class="question-category">${question.category || '测试题目'}</div>
                </div>
                <div class="question-text">${question.question}</div>
                <div class="options">
                    ${question.options.map((option, index) => `
                        <div class="option" onclick="selectOption(${index})" data-option="${index}">
                            <div class="option-label">${String.fromCharCode(65 + index)}</div>
                            <div class="option-text">${option}</div>
                        </div>
                    `).join('')}
                </div>
                <div class="explanation" id="explanation-${currentQuestion}">
                    <div class="explanation-title">💡 答案解析</div>
                    <div class="explanation-text">${question.explanation}</div>
                </div>
            `;

            container.appendChild(questionCard);

            if (userAnswers[currentQuestion] !== null) {
                const userAnswer = userAnswers[currentQuestion];
                const options = questionCard.querySelectorAll('.option');
                
                options.forEach(option => {
                    option.style.pointerEvents = 'none';
                });
                
                options.forEach((option, index) => {
                    if (index === question.correct) {
                        option.classList.add('correct');
                    }
                    if (index === userAnswer && index !== question.correct) {
                        option.classList.add('incorrect');
                    }
                    if (index === userAnswer && index === question.correct) {
                        option.classList.add('correct', 'selected');
                    }
                });

                const explanation = questionCard.querySelector(`#explanation-${currentQuestion}`);
                if (explanation) {
                    explanation.classList.add('show');
                }
            }
        }

        function selectOption(optionIndex) {
            userAnswers[currentQuestion] = optionIndex;
            
            const question = questions[currentQuestion];
            const options = document.querySelectorAll('.option');
            
            options.forEach(option => {
                option.classList.remove('selected', 'correct', 'incorrect');
                option.style.pointerEvents = 'none';
            });
            
            options.forEach((option, index) => {
                if (index === question.correct) {
                    option.classList.add('correct');
                }
                if (index === optionIndex && index !== question.correct) {
                    option.classList.add('incorrect');
                }
                if (index === optionIndex && index === question.correct) {
                    option.classList.add('correct', 'selected');
                }
            });

            const explanation = document.getElementById(`explanation-${currentQuestion}`);
            if (explanation) {
                explanation.classList.add('show');
            }

            renderQuestionNavigation();
            updateButtons();
        }

        function nextQuestion() {
            if (currentQuestion < questions.length - 1) {
                currentQuestion++;
                renderQuestion();
                renderQuestionNavigation();
                updateProgress();
                updateButtons();
            }
        }

        function previousQuestion() {
            if (currentQuestion > 0) {
                currentQuestion--;
                renderQuestion();
                renderQuestionNavigation();
                updateProgress();
                updateButtons();
            }
        }

        function goToQuestion(index) {
            currentQuestion = index;
            renderQuestion();
            renderQuestionNavigation();
            updateProgress();
            updateButtons();
        }

        function updateProgress() {
            const progress = ((currentQuestion + 1) / questions.length) * 100;
            document.getElementById('progressFill').style.width = progress + '%';
        }

        function updateButtons() {
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const submitBtn = document.getElementById('submitBtn');

            prevBtn.disabled = currentQuestion === 0;
            
            if (currentQuestion === questions.length - 1) {
                nextBtn.style.display = 'none';
                submitBtn.style.display = 'inline-block';
            } else {
                nextBtn.style.display = 'inline-block';
                submitBtn.style.display = 'none';
            }

            const allAnswered = userAnswers.every(answer => answer !== null);
            submitBtn.disabled = !allAnswered;
        }

        function submitQuiz() {
            let correct = 0;
            userAnswers.forEach((answer, index) => {
                if (answer === questions[index].correct) {
                    correct++;
                }
            });

            const percentage = Math.round((correct / questions.length) * 100);
            
            document.getElementById('finalScore').textContent = percentage + '%';
            document.getElementById('correctCount').textContent = correct;
            document.getElementById('incorrectCount').textContent = questions.length - correct;
            document.getElementById('totalQuestions').textContent = questions.length;
            
            let scoreText = '';
            if (percentage >= 90) {
                scoreText = '🏆 优秀！你在该领域表现卓越！';
            } else if (percentage >= 80) {
                scoreText = '👍 良好！继续保持学习的热情！';
            } else if (percentage >= 60) {
                scoreText = '📚 及格！建议进一步加强学习！';
            } else {
                scoreText = '💪 需要努力！建议系统学习相关知识！';
            }
            
            document.getElementById('scoreText').textContent = scoreText;
            document.getElementById('results').classList.add('show');
            document.querySelector('.controls').style.display = 'none';
            
            showingResults = true;
        }

        // 导入导出功能
        function toggleImport() {
            const panel = document.getElementById('importPanel');
            const isVisible = panel.style.display !== 'none';
            panel.style.display = isVisible ? 'none' : 'block';
            
            if (!isVisible) {
                // 清空输入框
                document.getElementById('jsonInput').value = '';
            }
        }

        function importQuestions() {
            const jsonInput = document.getElementById('jsonInput').value.trim();
            if (!jsonInput) {
                alert('请输入JSON数据！');
                return;
            }

            try {
                const newQuestions = JSON.parse(jsonInput);
                
                // 验证数据格式
                if (!Array.isArray(newQuestions)) {
                    throw new Error('数据必须是数组格式');
                }
                
                if (newQuestions.length === 0) {
                    throw new Error('题库不能为空');
                }
                
                // 验证每道题的格式
                newQuestions.forEach((q, index) => {
                    if (!q.category || !q.question || !Array.isArray(q.options) || 
                        typeof q.correct !== 'number' || !q.explanation) {
                        throw new Error(`第${index + 1}题格式不正确`);
                    }
                    if (q.options.length !== 4) {
                        throw new Error(`第${index + 1}题必须有4个选项`);
                    }
                    if (q.correct >= q.options.length || q.correct < 0) {
                        throw new Error(`第${index + 1}题的correct值超出范围`);
                    }
                });

                // 替换题目数据
                questions.length = 0;
                questions.push(...newQuestions);
                
                // 重置测试状态
                currentQuestion = 0;
                userAnswers = new Array(questions.length).fill(null);
                showingResults = false;
                
                // 关闭导入面板
                toggleImport();
                
                // 切换到答题界面
                document.getElementById('setupScreen').style.display = 'none';
                document.getElementById('quizScreen').style.display = 'block';
                document.getElementById('exportBtn').style.display = 'inline-block';
                
                // 初始化答题界面
                initQuiz();
                
                alert(`成功导入${questions.length}道题目！`);
                
            } catch (error) {
                alert('JSON格式错误：' + error.message);
            }
        }

        function exportQuestions() {
            if (questions.length === 0) {
                alert('没有题目可以导出！');
                return;
            }
            
            const jsonData = JSON.stringify(questions, null, 2);
            
            // 创建下载链接
            const blob = new Blob([jsonData], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `quiz_questions_${new Date().getTime()}.json`;
            a.click();
            URL.revokeObjectURL(url);
            
            alert('题库导出成功！');
        }

        function showJsonExample() {
            const exampleData = [
                {
                    "category": "产品知识",
                    "question": "拉杆箱按照材质分类，以下哪种材质最轻便且耐用？",
                    "options": [
                        "ABS材质",
                        "PC材质", 
                        "铝镁合金",
                        "牛津布"
                    ],
                    "correct": 1,
                    "explanation": "PC材质（聚碳酸酯）具有轻便、耐冲击、透明度高等优点，是目前高端拉杆箱的主流材质。相比ABS更轻更耐用，比铝镁合金更轻便，比牛津布更坚固。"
                },
                {
                    "category": "市场分析",
                    "question": "国内拉杆箱市场的主要销售渠道占比最大的是？",
                    "options": [
                        "线下专卖店",
                        "电商平台",
                        "超市卖场",
                        "机场免税店"
                    ],
                    "correct": 1,
                    "explanation": "目前电商平台已成为拉杆箱销售的主要渠道，占市场份额60%以上。天猫、京东、拼多多等平台的便捷性和价格透明度吸引了大量消费者，尤其是年轻群体。"
                }
            ];
            
            document.getElementById('jsonExample').textContent = JSON.stringify(exampleData, null, 2);
            document.getElementById('jsonModal').style.display = 'block';
        }

        function closeJsonModal() {
            document.getElementById('jsonModal').style.display = 'none';
        }

        // 点击模态框外部关闭
        document.addEventListener('click', function(event) {
            const modal = document.getElementById('jsonModal');
            if (event.target === modal) {
                closeJsonModal();
            }
        });

        function backToSetup() {
            document.getElementById('setupScreen').style.display = 'block';
            document.getElementById('quizScreen').style.display = 'none';
            document.getElementById('results').classList.remove('show');
            document.querySelector('.controls').style.display = 'block';
            document.getElementById('exportBtn').style.display = 'none';
            
            // 重置状态
            questions = [];
            userAnswers = [];
            currentQuestion = 0;
            showingResults = false;
        }

        // 初始化时选择默认行业
        selectIndustry('luggage');

        // 处理视频背景加载
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.getElementById('bg-video');
            
            video.addEventListener('error', function() {
                console.log('视频加载失败，使用备用背景');
                video.style.display = 'none';
            });
            
            video.addEventListener('loadeddata', function() {
                console.log('视频背景加载成功');
            });
            
            // 确保视频静音（某些浏览器要求）
            video.muted = true;
        });
    </script>
</body>
</html>